Step 2 of 3: Adding the C1UniformGrid control to the Application

In This Topic

In this step you'll add a C1UniformGrid.

Complete the following steps:

First, remove the Grid tags from your project.

Drag and drop C1UniformGrid control on the page. This adds the panel and a reference to the page.

Edit the <Xaml:C1UniformGrid> tags to size the grid and add child elements to the grid (numbered cells in this case) so the markup looks like the following:

Markup	Copy Code
<Xaml:C1UniformGrid Width="300" Height="300"> <Border Background="#FF005B84" > <TextBlock Text="0" /> </Border> <Border Background="#FF008B9C" > <TextBlock Text="1" /> </Border> <Border Background="#FF00ADD6" > <TextBlock Text="2" /> </Border> <Border Background="#FF497331" > <TextBlock Text="3" /> </Border> <Border Background="#FF0094D6" > <TextBlock Text="4" /> </Border> <Border Background="#FF9DCFC3" > <TextBlock Text="5" /> </Border> <Border Background="#FFA5DDFE" > <TextBlock Text="6" /> </Border> <Border Background="#FFE0EEEF" > <TextBlock Text="7" /> </Border> <Border Background="CornflowerBlue" > <TextBlock Text="8" /> </Border> <Border Background="LightYellow" > <TextBlock Text="9" /> </Border> </Xaml:C1UniformGrid>

Markup

Copy Code

<Xaml:C1UniformGrid Width="300" Height="300">          
            <Border Background="#FF005B84" >
                <TextBlock Text="0" />
            </Border>
            <Border Background="#FF008B9C" >
                <TextBlock Text="1" />
            </Border>
            <Border Background="#FF00ADD6" >
                <TextBlock Text="2" />
            </Border>
            <Border Background="#FF497331" >
                <TextBlock Text="3" />
            </Border>
            <Border Background="#FF0094D6" >
                <TextBlock Text="4" />
            </Border>
            <Border Background="#FF9DCFC3" >
                <TextBlock Text="5" />
            </Border>
            <Border Background="#FFA5DDFE" >
                <TextBlock Text="6" />
            </Border>
            <Border Background="#FFE0EEEF" >
                <TextBlock Text="7" />
            </Border>
            <Border Background="CornflowerBlue" >
                <TextBlock Text="8" />
            </Border>
            <Border Background="LightYellow" >
                <TextBlock Text="9" />
            </Border>
    </Xaml:C1UniformGrid>

In this step you added content to the C1UniformGrid panel. In the next step you'll run the application and edit some additional properties of the grid.